<template>
  <div class="box-container">
    <div class="box">
      我是一个盒子
      <div class="box-inner">我是一个盒子里的盒子</div>
      <div class="box-inner">我也是一个盒子里的盒子</div>
      <div class="box-inner">俺也一样</div>
      <template v-for="i in 10" :key="i">
        <div class="box-long" v-if="isShow">我是一群非常长的div{{ i }}</div>
      </template>
    </div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <button @click="isShow = !isShow">换行</button>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
const isShow = ref(false);

const activedClass = computed(() => {
  return flexClass.value;
});
</script>

<style scoped>
.box-container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  display: flex; /* 弹性布局 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴 */
}
.box {
  width: 400px;
  height: 400px;
  background-color: rgb(172, 172, 172);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 换行 */
}
.box-inner {
  width: 50px;
  height: 50px;
  padding: 20px;
  background-color: rgb(255, 255, 255);
}
.box-long {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 255, 255);
}
</style>
